1

内容

平时编写代码的时候很少关注细节,对javascript深层也没具体了解,下面针对平时写代码的形式分析、调整完善自己的代码,这里以一个简单例子分析js作用域和垃圾回收机制,通过块级作用域处理一些细节,提升自己代码性能。

普通案例

在日常中最常见的代码编写方式:

function do(arg) {
    // 做一些事情
}
var doFunc = {...}

do(doFunc);

var btn = document.getElementById( "my_button" );
btn.addEventListener( "click", function click(evt){
    console.log("button clicked");
});

这样编写形式的代码很多,很多时候在编写的时候也没留意这些问题,功能倒是能实现,代码量少的时候没事,但是当代码量大,事关代码性能,那就是两码事了。

简单分析

这里可以看到btn的点击事件和doFunc根本没什么关系。这意味着从理论上讲,在 do(..) 运行之后,这个消耗巨大内存的数据结构可以被作为垃圾回收。然而,JS引擎很可能(虽然这要看具体实现)将会仍然将这个结构保持一段时间,因为click函数在整个作用域上拥有一个闭包。

处理方法

在日常编写代码中巧用块儿作用域可以解决这个问题,我们主动让js引擎清楚的知道它不必要再保存doFunc。

function do(arg) {
    // 做一些事情
}
{
    let doFunc = {...}
    
    do(doFunc);
}

var btn = document.getElementById( "my_button" );
btn.addEventListener( "click", function click(evt){
    console.log("button clicked");
});
声明可以将变量绑定在本地的明确的块儿是一种强大的工具,结合自己的代码,合理使用,一步步改善自己的代码。

手里有糖
110 声望0 粉丝